/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

.spectrum {
  --hljs-color: var(--spectrum-global-color-gray-800);
  --hljs-background: var(--spectrum-global-color-gray-75);
  --hljs-keyword-color: var(--spectrum-global-color-fuchsia-700);
  --hljs-section-color: var(--spectrum-global-color-red-600);
  --hljs-string-color: var(--spectrum-global-color-green-600);
  --hljs-literal-color: var(--spectrum-global-color-purple-700);
  --hljs-attribute-color: var(--spectrum-global-color-indigo-700);
  --hljs-class-color: var(--spectrum-global-color-seafoam-600);
  --hljs-function-color: var(--spectrum-global-color-blue-600);
  --hljs-variable-color: var(--spectrum-global-color-magenta-700);
  --hljs-title-color: var(--spectrum-global-color-indigo-700);
  --hljs-comment-color: var(--spectrum-global-color-gray-700);
  --mark-background: rgba(20,115,230,0.1);
  --mark-border: var(--spectrum-global-color-blue-400);
}

.spectrum.dark {
  --hljs-literal-color: var(--spectrum-orange-800);
  --hljs-function-color: var(--spectrum-blue-1000);
  --hljs-attribute-color: var(--spectrum-blue-1000);
  --hljs-title-color: var(--spectrum-blue-1000);
  --hljs-keyword-color: var(--spectrum-magenta-900);
  --hljs-string-color: var(--spectrum-green-1000);
  --hljs-section-color: var(--spectrum-red-900);
  --hljs-variable-color: var(--spectrum-magenta-900);
  --mark-background: rgba(38,128,235,0.1);
}

/** for now keep syntax highlighting different from prop table. we can join them later if need be,
 *  though since they don't really represent the same things,
 *  i think the prop table should get renames and new classes
 */

:global(.hljs) {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  color: var(--hljs-color);
  background: var(--hljs-background);
}

:global(.hljs-comment),
:global(.hljs-quote) {
  color: var(--hljs-comment-color);
  font-style: italic;
}

:global(.hljs-doctag),
:global(.hljs-formula),
:global(.hljs-keyword) {
  color: var(--hljs-keyword-color);
}

:global(.hljs-deletion),
:global(.hljs-name),
:global(.hljs-section),
:global(.hljs-selector-tag),
:global(.hljs-subst) {
  color: var(--hljs-section-color);
}

:global(.hljs-literal),
:global(.hljs-number) {
  color: var(--hljs-literal-color);
}

:global(.hljs-string) {
  color: var(--hljs-string-color);
}

:global(.hljs-attr),
:global(.hljs-addition),
:global(.hljs-attribute),
:global(.hljs-meta-string),
:global(.hljs-regexp) {
  color: var(--hljs-attribute-color);
}

:global(.hljs-built_in),
:global(.hljs-class) :global(.hljs-title) {
  color: var(--hljs-class-color);
}

:global(.hljs-selector-attr),
:global(.hljs-selector-class),
:global(.hljs-selector-pseudo),
:global(.hljs-template-variable),
:global(.hljs-type),
:global(.hljs-variable) {
  color: var(--hljs-variable-color);
}

:global(.hljs-bullet),
:global(.hljs-link),
:global(.hljs-meta),
:global(.hljs-selector-id),
:global(.hljs-symbol),
:global(.hljs-title) {
  color: var(--hljs-title-color);
}

:global(.hljs-function) {
  color: var(--hljs-function-color);
}

:global(.hljs-emphasis) {
  font-style: italic;
}

:global(.hljs-strong) {
  font-weight: bold;
}

:global(.hljs-link) {
  text-decoration: underline;
}

:global(.source),
:global(.embedded) {
  display: block;
  color: var(--hljs-color);

  text-align: left;
  word-spacing: normal;
  word-break: break-word;
  line-height: 1.5;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

:global(.source) {
  background: var(--hljs-background);
}

:global(.embedded) {
  display: inline;
  padding: 0;
}

:global(.constant),
:global(.number),
:global(.number .type) {
  color: var(--hljs-literal-color);
}

:global(.function) {
  color: var(--hljs-function-color);
}

:global(.keyword) {
  color: var(--hljs-keyword-color);
}

:global(.attribute) {
  color: var(--hljs-attribute-color);
}
:global(.tag),
:global(.type) {
  color: var(--hljs-section-color);
}

:global(.punctuation.special) {
  color: var(--hljs-title-color);
}

:global(.property) {
  color: var(--hljs-variable-color);
}

:global(.string) {
  color: var(--hljs-string-color);
}

:global(.comment) {
  color: var(--hljs-comment-color);
  font-style: italic;
}

/* regex */
:global(.string.special) {
  :global(.operator) {
    color: var(--hljs-keyword-color);
  }

  :global(.punctuation.bracket) {
    color: var(--hljs-attribute-color);
  }
}

:global(.source) mark {
  display: block;
  position: relative;
  background: var(--mark-background);
  border-left: 2px solid var(--mark-border);
  margin: 0 calc(var(--code-padding) * -1);
  padding: 0 var(--code-padding) 0 calc(var(--code-padding) - 2px);
  color: inherit;
  --hljs-comment-color: var(--spectrum-gray-800);
  --hljs-string-color: var(--spectrum-green-1000);
}

@media (forced-colors: active) {
  :global(.source) mark {
    forced-color-adjust: none;
    background: Mark;
    color: MarkText;
    border-left: none;

    * {
      color: inherit;
    }
  }
}
